<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>
    <!-- head -->
    <div class="container">
        <div class="row">
            <img class="col-md-4" src="./img/logo.png" alt="">
            <img class="col-md-4" src="./img/header.png" alt="">
            <div class="col-md-4 text-center" style="line-height: 62px;">
                <a href="#" data-toggle="modal" data-target="#loginModal">登录</a>&nbsp;&nbsp;
                <a href="#" data-toggle="modal" data-target="#regModal">注册</a>&nbsp;&nbsp;
                <a href="#">首页</a>
            </div>
        </div>
    </div>
    <!-- 登录模态框 -->
    <div id="loginModal" class="modal fade" tabindex="-1">
        <!-- 模态框中的窗口 -->
        <div class="modal-dialog modal-lg">
            <!-- 模态框中的内容 -->
            <div class="modal-content">
                <!--头部-->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">用户登录</h4>
                </div>
                <!-- body部分 -->
                <div class="modal-body form-horizontal" role="form">
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label text-center">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username" placeholder="请输入名字">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label text-center">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="password" placeholder="请输入密码">
                        </div>
                    </div>
                </div>
                <!--footer部分-->
                <div class="modal-footer">
                    <button class="btn btn-primary">登录</button>
                </div>
            </div><!-- modal content end -->
        </div><!-- modal-lg end -->
    </div>

    <!-- 注册模态框 -->
    <div id="regModal" class="modal fade" tabindex="-1">
        <!-- 模态框中的窗口 -->
        <div class="modal-dialog modal-lg">
            <!-- 模态框中的内容 -->
            <div class="modal-content">
                <!--头部-->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">用户登录</h4>
                </div>
                <!-- body部分 -->
                <div class="modal-body form-horizontal" role="form">
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label text-center">手机号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="phone" placeholder="请输入手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label text-center">验证码</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="code" placeholder="短信验证码">
                        </div>
                        <div>
                            <input type="button" class="btn" value="发送验证码" style="outline: none;">
                        </div>
                    </div>
                </div>
                <!--footer部分-->
                <div class="modal-footer">
                    <button class="btn btn-primary">注册</button>
                </div>
            </div><!-- modal content end -->
        </div><!-- modal-lg end -->
    </div>

    <!-- 导航栏 -->
    <div class="container">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <div class=" navbar-brand">首页</div>
                </div>

                <div class="col-md-6">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">手机数码</a></li>
                        <li><a href="#">电脑办公</a></li>
                        <li><a href="#">服装鞋帽</a></li>
                        <li><a href="#">母婴产品</a></li>
                        <li><a href="#">奢饰品</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">全部分类<b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">手机数码</a></li>
                                <li class="divider"></li>
                                <li><a href="#">电脑办公</a></li>
                                <li class="divider"></li>
                                <li><a href="#">服装鞋帽</a></li>
                                <li class="divider"></li>
                                <li><a href="#">奢饰品</a></li>
                            </ul>
                        </li>

                    </ul>
                </div>
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">submit</button>
                </form>
            </div>
        </nav>
    </div>
    <!-- 轮播图 -->
    <div class="container">
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img class="center-block" src="./img/1.jpg" alt="First slide">
                </div>
                <div class="item">
                    <img class="center-block" src="./img/2.jpg" alt="Second slide">
                </div>
                <div class="item">
                    <img class="center-block" src="./img/3.jpg" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <!-- 热门商品 -->
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <h2 class="col-md-10">热门商品
                <img src="./img/title2.jpg" alt="" style="vertical-align: bottom;">
            </h2>
        </div>
        <!-- 商品 -->
        <div class="row">
            <!-- 左边单个商品图 -->
            <div class="col-md-2">
                <img class="img-responsive" src="./img/big01.jpg" alt="">
            </div>
            <!-- 右边商品列表图 -->
            <div class=" col-md-10">
                <!-- 第一行商品 -->
                <div class="row">
                    <ul class="list-unstyled list-inline">
                        <li class="col-md-6">
                            <img src="./img/middle01.jpg" alt="" class="col-md-12" height="200">
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small01.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small02.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small03.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                    </ul>
                </div>
                <!-- 第二行商品 -->
                <div class="row">
                    <ul class="list-unstyled list-inline">
                        <li class="col-md-2">
                            <img src="./img/small04.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small05.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small06.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small07.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small08.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li>
                            <img src="./img/small09.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>

                    </ul>
                </div>


            </div>
        </div>
        <!-- 广告 -->
        <div class="row">
            <img src="./img/ad.jpg" alt="" class="col-md-12">
        </div>
    </div>

    <!-- 最新商品 -->
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <h2 class="col-md-10">最新商品
                <img src="./img/title2.jpg" alt="" style="vertical-align: bottom;">
            </h2>
        </div>
        <!-- 商品 -->
        <div class="row">
            <!-- 左边单个商品图 -->
            <div class="col-md-2">
                <img class="img-responsive" src="./img/big01.jpg" alt="">
            </div>
            <!-- 右边商品列表图 -->
            <div class=" col-md-10">
                <!-- 第一行商品 -->
                <div class="row">
                    <ul class="list-unstyled list-inline">
                        <li class="col-md-6">
                            <img src="./img/middle01.jpg" alt="" class="col-md-12" height="200">
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small01.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small02.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small03.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                    </ul>
                </div>
                <!-- 第二行商品 -->
                <div class="row">
                    <ul class="list-unstyled list-inline">
                        <li class="col-md-2">
                            <img src="./img/small04.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small05.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small06.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small07.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li class="col-md-2">
                            <img src="./img/small08.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>
                        <li>
                            <img src="./img/small09.jpg" alt="" class="center-block">
                            <p class="text-center"><a href="#">电炖锅</a></p>
                            <p class="text-center"> <a href="#">￥399</a></p>
                        </li>

                    </ul>
                </div>


            </div>
        </div>
        <!-- 服务 -->
        <div class="row">
            <img src="./img/footer.jpg" alt="" class="col-md-12">
        </div>
    </div>

    <!-- 底部 -->
    <div class="container text-center">
        <p>
            <a href="#">关于我们</a>&nbsp;&nbsp;&nbsp;
            <a href="#">联系我们</a>&nbsp;&nbsp;&nbsp;
            <a href="#">招贤纳士</a>&nbsp;&nbsp;&nbsp;
            <a href="#">法律声明</a>&nbsp;&nbsp;&nbsp;
            <a href="#">友情链接</a>&nbsp;&nbsp;&nbsp;
            <a href="#">支付方式</a>&nbsp;&nbsp;&nbsp;
            <a href="#">配送方式</a>&nbsp;&nbsp;&nbsp;
            <a href="#">服务声明</a>&nbsp;&nbsp;&nbsp;
            <a href="#">广告声明</a>&nbsp;&nbsp;&nbsp;
        </p>
        <p>Copyright &copy; 2009-2022 极客商城 版权所有</p>
    </div>
</body>

</html>